<section class="mb-3 manual" ng-init="getList()">
    <div class="row">
        <div class="col-9">
            <div class="row" ng-init="getList()">
                <!-- <div ng-repeat="post in data.items" class="col-md-4">
                    <div class="card mb-4 shadow-sm">
                        <img class="bd-placeholder-img card-img-top" src="{{post.thumbnailUrl}}" />
                        <div class="card-body">
                            <h6 class="small mb-4">{{post.title}}
                                <br />
                                <small class="text-muted">by <b><a href="{{post.properties.author_url}}" target="_blank">{{post.properties.author_name}}</a></b> in <b>{{post.properties.category}}</b></small>
                            </h6>

                            <div class="d-flex justify-content-left">
                                <h5 class="text-success">$ {{post.properties.price }}</h5>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="col-5 p-0">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
                                            style="width: {{post.properties.avg_rating}}%" aria-valuenow="{{post.properties.avg_rating}}" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small class="text-muted">{{post.properties.download_count}} download</small>
                                </div>
                                <div class="col-7 justify-content-end text-right p-0">
                                    <a target="_blank" href="{{post.properties.external_preview_url}}" class="btn btn-sm btn-outline-secondary mr-1">Preview</a>
                                    <button type="button" class="btn btn-sm btn-outline-primary"><i
                                            class="fas fa-cloud-download-alt"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->

                <div class="col-md-4" ng-repeat="item in data.items track by $index" sort-model="media"
                    sort-model-id="{{item.id}}">
                    <div class="card mb-4 shadow-sm">
                        <preview-image img-width="'100%'" img-src="item.fullPath" class="bd-placeholder-img card-img-top w-100"></preview-image>
                        <!-- <img class="bd-placeholder-img card-img-top"
                            src="https://themeforest.img.customer.envatousercontent.com/files/274184998/01_preview.jpg?auto=compress%2Cformat&fit=crop&crop=top&w=590&h=300&s=42793292eb08245b65a4b064bbbfa351" /> -->
                        <div class="card-body">
                            <h6 class="small">{{item.title}}
                                <br />
                                <small class="text-muted">by {{item.author}} in {{item.category}} - {{item.createdDateTime | utcToLocal:'d.M.yyyy h:mm a'}}</small>
                            </h6>

                            <div class="d-flex justify-content-between">
                                <div class="col-12 justify-content-end text-right p-0">
                                    <!-- <button type="button" class="btn btn-sm btn-outline-secondary mr-1">Preview</button> -->
                                    <a href="{{item.fullPath}}" type="button" class="btn btn-sm btn-outline-primary"><i
                                        class="fas fa-pen"></i></a>
                                    <a href="{{item.fullPath}}" type="button" class="btn btn-sm btn-outline-primary"><i
                                                    class="fas fa-cloud-download-alt"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-3">
            <div class="card position-sticky" style="top: 5.5rem; z-index: 20;">
                <h6 class="card-header">
                    Filter
                </h6>
                <div class="card-body">
                    <!-- <div class="form-group btn-group btn-group-sm d-flex" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-outline-primary small"><i class="mi mi-Layout mi-fw"></i></button>
                        <button type="button" class="btn btn-outline-primary small"><i class="mi mi-Puzzle mi-fw"></i></button>
                        <button type="button" class="btn btn-outline-primary small"><i class="mi mi-ResolutionLegacy mi-fw"></i></button>
                        <button type="button" class="btn btn-outline-primary small">...</button>
                    </div> -->
                    <div class="form-group input-group input-group-sm flex-nowrap">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="addon-wrapping"><i class="fas fa-search"></i></span>
                        </div>
                        <input type="text" class="form-control" placeholder="Search keywords..." aria-label="Username"
                            aria-describedby="addon-wrapping">
                    </div>
                    <div class="form-group">
                        <label for="customRange1">Sort by</label>
                        <select class="custom-select custom-select-sm">
                            <option selected>Select sort by:</option>
                            <option value="1">Newest</option>
                            <option value="2">Oldest</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="customRange1">Categories</label>
                        <select class="custom-select custom-select-sm">
                            <option selected>Select category:</option>
                            <option value="1">All</option>
                            <option value="2">Blog</option>
                            <option value="3">Website</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="customRange1">Date range</label>
                        <div class="input-group input-group-sm">
                            <input type="date"
                                class="form-control form-control-sm ng-pristine ng-untouched ng-valid ng-empty">
                            <input type="date"
                                class="form-control form-control-sm ng-pristine ng-untouched ng-valid ng-empty">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>